import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useScreenWidth } from '../../hooks/useScreenWidth'
import CustomTabBar from '../../components/CustomTabBar'
import banner1 from '../../image/11.png'
import banner2 from '../../image/12.png'
import banner3 from '../../image/13.png'
import { useEffect, useRef, useState } from 'react'
import lottie from 'lottie-web'
import animationData from '../../image/个人.json'
import './index.scss'

export default function H5AppPage() {
  const screenInfo = useScreenWidth()
  const [currentIndex, setCurrentIndex] = useState(0)
  const lottieRef = useRef<HTMLDivElement>(null)

  // 初始化Lottie动画
  useEffect(() => {
    if (lottieRef.current) {
      const animation = lottie.loadAnimation({
        container: lottieRef.current,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
      })

      return () => {
        animation.destroy()
      }
    }
  }, [])

  // 导航点击处理函数
  const handleNavClick = (navType: string) => {
    console.log('导航点击:', navType)
    // 功能模块跳转逻辑
    if (navType === '更换电池' || navType === '更换屏幕' || navType === '升级内存') {
      Taro.navigateTo({
        url: '/pages/JZK/ditu'
      })
    }
    // 这里可以添加其他导航逻辑
  }

  // 轮播图数据
  const banners = [
    {
      id: 1,
      image: banner1,
    },
    {
      id: 2,
      image: banner2,
    },
    {
      id: 3,
      image: banner3,
    }
  ]

  // 服务数据
  const services = [
    {
      id: 1,
      icon: '📱',
      title: '140余种工厂服务',
      subtitle: '专业维修团队'
    },
    {
      id: 2,
      icon: '🔧',
      title: '近千名维修工程师',
      subtitle: '技术精湛'
    },
    {
      id: 3,
      icon: '⭐',
      title: '99%客户好评率',
      subtitle: '服务满意'
    },
    {
      id: 4,
      icon: '🏠',
      title: '1小时快速上门维修',
      subtitle: '便民服务'
    }
  ]

  // 功能模块数据
  const modules = [
    {
      id: 1,
      title: '更换电池',
      subtitle: '高品质配件 价格透明',
      bgColor: '#A8E6CF',
      icon: '🔋'
    },
    {
      id: 2,
      title: '更换屏幕',
      subtitle: '快速便民 就近上门',
      bgColor: '#B8C6DB',
      icon: '📱'
    },
    {
      id: 3,
      title: '升级内存',
      subtitle: '匠心品质 极致服务',
      bgColor: '#FFD93D',
      icon: '💾'
    }
  ]
  // 点击事件
  const handleOnclike = () => {
    Taro.navigateTo({
      url: '/pages/ZPF/zpf'
    })
  }

  return (
    <View className="index-page">
      {/* 顶部导航栏 */}
      <View className="header">
        <View className="logo-area">
          <Text className="logo">即时修</Text>
        </View>
        <View className="nav-menu">
          <Text className="nav-item active" onClick={() => handleNavClick('手机维修')}>手机维修</Text>
          <Text className="nav-item" onClick={() => handleNavClick('iPad维修')}>iPad维修</Text>
          <Text className="nav-item" onClick={() => handleNavClick('笔记本维修')}>笔记本维修</Text>
          <Text className="nav-item" onClick={() => handleNavClick('台式机维修')}>台式机维修</Text>
          <Text className="nav-item" onClick={() => handleNavClick('家电维修')}>家电维修</Text>
          <Text className="nav-item" onClick={() => handleNavClick('家电清洗')}>家电清洗</Text>
        </View>
        <View className="search-area">
          <Text className="search-placeholder">设备型号</Text>
          <Text className="search-icon">🔍</Text>
        </View>
      </View>
      {/* 主体内容区域 */}
      <View className="main-content">
        {/* 轮播图区域 */}
        <View className="banner-section">
          <View className="banner-container">
            <Swiper
              className="banner-swiper"
              indicatorColor="rgba(255,255,255,0.5)"
              indicatorActiveColor="#fff"
              circular
              autoplay
              interval={3000}
              indicatorDots
            >
              {banners.map(banner => (
                <SwiperItem key={banner.id}>
                  <View className="banner-item">
                    <Image src={banner.image} className="banner-image" mode="aspectFill" />
                  </View>
                </SwiperItem>
              ))}
            </Swiper>
          </View>
        </View>

        {/* Lottie动画示例 */}
        <View className='lottie-section'>
          <View className='lottie-container' ref={lottieRef} onClick={handleOnclike}></View>
        </View>

        {/* 服务特色区域 */}
        <View className="services-section">
          {services.map(service => (
            <View key={service.id} className="service-item">
              <View className="service-icon">{service.icon}</View>
              <Text className="service-title">{service.title}</Text>
              <Text className="service-subtitle">{service.subtitle}</Text>
            </View>
          ))}
        </View>

        {/* 功能模块区域 */}
        <View className="modules-section">
          {modules.map(module => (
            <View 
              key={module.id} 
              className="module-item"
              style={{ backgroundColor: module.bgColor }}
              onClick={() => handleNavClick(module.title)}
            >
              <View className="module-content">
                <Text className="module-title">{module.title}</Text>
                <Text className="module-subtitle">{module.subtitle}</Text>
              </View>
              <View className="module-icon">
                <Text className="icon-text">{module.icon}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      {/* 自定义TabBar */}
      <CustomTabBar />
    </View>
  )
}